<template>
  <div class="co-image" :style="{width: width+'px' ,height: currheight+'px' , margin: '0 auto'}">
    <img
      class="co-image__inner"
      @click="clickHandler"
      :src="src"
    >
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="src" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </div>
</template>

<script>

export default {
    name: 'ImagePreview',
    data() {
      return {
        loading: true,
        error: false,
        dialogVisible: false,
        currheight: 28,
      };
    },
    props: {
      src: String,
      width: {
        type: Number,
        default: 28,
      },
      height: {
        type: Number,
        default: 0,
      }
    },

    mounted() {
        if (this.height === 0)  this.currheight = this.width
        else this.currheight = this.height
    },
    methods: {
      clickHandler() {
        this.dialogVisible = true;
      },
      closeViewer() {
        
      }
    }
  };
</script>

<style scoped>
.co-image > img {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>
